{include file="public/header"}
<body>
<div id="app" v-cloak>
    <div class="ht-main">
        <div class="ht-tool">
            <el-button type="success" size="mini" icon="el-icon-plus" @click="add">添加</el-button>
        </div>
        <div class="ht-main-body">
            <el-table :data = "tableData" row-key="id"
                    :tree-props="{children:'children',hasChildren:'hasChildren'}"
                    header-row-class-name="ht-table-header"
                    border
            >
                <el-table-column prop="id" label="ID" width="60" align="center" type=""></el-table-column>
                <el-table-column prop="icon" label="图标" width="50" align="center" type="">
                    <template slot-scope="scope">
                        <i :class="scope.row.icon"></i>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="分类名称" width="200"></el-table-column>
                <el-table-column prop="url" label="控制器/方法"></el-table-column>
                <el-table-column
                        prop="sort"
                        label="排序"
                        width="200">
                    <template slot-scope="scope">
                        <el-input v-model="scope.row.sort" @blur="changeSort($event,scope.row.id)"></el-input>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="status"
                        label="是否验证权限"
                        width="150">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.status"
                                active-color="#13ce66"
                                inactive-color="#eeeeee"
                                @change="changeStatus($event,scope.row.id)"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="is_menu"
                        label="是否显示在菜单"
                        width="150">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.is_menu"
                                active-color="#13ce66"
                                inactive-color="#eeeeee"
                                @change="changeMenuStatus($event,scope.row.id)"
                                :active-value="1"
                                :inactive-value="0">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="is_menu"
                        label="操作"
                        width="250">
                    <template slot-scope="scope">
                        <el-button @click="addChild(scope.row)" size="mini" type="primary">添加子属性</el-button>
                        <el-button @click="edit(scope.row)" size="mini" type="primary" icon="el-icon-edit"></el-button>
                        <el-button @click="del(scope.row)"  size="mini" type="danger" icon="el-icon-delete"></el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-drawer
                    :visible.sync="is_edit"
                    size="95%"
                    :with-header="false"
                    custom-class="ht-drawer-bg"
            >
                <div class="ht-drawer-main" >
                    <el-page-header @back="goBack" title="Esc返回" :content="content"></el-page-header>
                    <div class="ht-form">
                        <el-form :model="editData" size="small">
                            <el-form-item label="上级" label-width="80px">
                                <el-select v-model="editData.pid" placeholder="上级分类">
                                    <el-option label="顶级分类" :value="0">顶级分类</el-option>
                                    <el-option :label="item.ltitle" :value="item.id" v-for="(item,index) in allAuth"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="名称" label-width="80px">
                                <el-input v-model="editData.title"></el-input>
                            </el-form-item>

                            <el-form-item label="Url" label-width="80px">
                                <el-input v-model="editData.url"></el-input>
                            </el-form-item>

                            <el-form-item label="图标" label-width="80px" >
                                <el-button @click="getIcon" @click="getIcon" :icon="editData.icon" v-if="editData.icon"></el-button>
                                <el-button @click="getIcon" @click="getIcon"  v-else>无</el-button>
                                <el-input v-model="editData.icon" style="width: 80%"></el-input>
                            </el-form-item>

                            <el-form-item label="排序" label-width="80px">
                                <el-input v-model="editData.sort"></el-input>
                            </el-form-item>

                            <el-form-item label="菜单" label-width="80px">
                                <el-switch
                                        v-model="editData.is_menu"
                                        active-color="#13ce66"
                                        inactive-color="#eeeeee"
                                        :active-value="1"
                                        :inactive-value="0">
                                </el-switch>
                            </el-form-item>

                            <el-form-item label-width="80px">
                                <el-button @click="goBack">取消</el-button>
                                <el-button type="primary" @click="onSubmit">提交</el-button>
                            </el-form-item>
                        </el-form>
                    </div>

                </div>
            </el-drawer>
        </div>
    </div>
</div>

{include file="public/common"}
<script>
    var vm = new Vue({
        el:"#app",
        data:function () {
            return {
                tableData: [],
                is_edit:false,
                editData:{
                    "title":'',
                    "icon":'',
                    "sort":'',
                    "url":'',
                    "pid":0,
                    "is_menu":0
                },
                editDataTemp:{
                    "title":'',
                    "icon":'',
                    "sort":'',
                    "url":'',
                    "pid":0,
                    "is_menu":0
                },
                content:'编辑',
                allAuth:{$menu|raw}
            }
        },
        created() {
            this.getData()
        },
        methods: {
            getIcon() {
                Helper.open('{:url("Auth/getIcon")}')
                console.log('icon')
            },
            changeStatus(e,id) {
                axios.post("{:url('Auth/ruleStatus')}", {id:id}).then((res)=>{
                    if (res.data.code == 1) {
                        this.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1000,
                        })
                    } else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1500,
                            onClose:function (){
                                location.reload()
                            }
                        })
                    }
                })
            },
            changeSort(e,id) {
                var that = this
                $.post('{:url("Auth/authRuleSort")}',{"sort":e.target.value,"id":id},function (res){
                    if (res.code !== 1) {
                        Helper.showErrorMsg(that,res.msg)
                    }
                })
            },
            changeMenuStatus(e,id) {
                axios.post("{:url('Auth/menuStatus')}", {id:id}).then((res)=>{
                    if (res.data.code == 1) {
                        this.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1000,
                        })
                    } else {
                        this.$message({
                            message:res.data.msg,
                            type:'error',
                            duration:1500,
                            onClose:function (){
                                location.reload()
                            }
                        })
                    }
                })
            },
            onSubmit() {
                var that = this
                $.post("{:url('Auth/authRuleAdd')}",this.editData,function (res){
                    if (res.code == 1) {
                        that.$message({
                            message:'操作成功',
                            type:'success',
                            duration:1000,
                            onClose:function (){
                                that.is_edit = false
                                location.reload()
                                parent.vm.getMenu()
                            }
                        })
                    }
                })
            },
            getData() {
                var that = this
                axios.post('{:url("Auth/ruleList")}').then((res)=>{
                    that.tableData = res.data.data
                })
            },
            add(){
                this.is_edit = true
                this.content = '添加'
                this.editData = this.editDataTemp
            },
            edit(data) {
                this.is_edit = true
                this.content = '编辑'
                this.editData = data
                console.log(data)
            },
            addChild(row) {
                this.is_edit = true
                this.content = '添加'
                this.editData = this.editDataTemp
                this.editData.pid = row.id
            },
            goBack(){
                this.is_edit = false
            },
            del(data) {
                var that = this
                that.$confirm('确定删除么?','提示',{
                    type:'warning',
                    lockScroll:false
                }).then(()=>{
                    axios.post('{:url("Auth/authRuleDel")}',{id:data.id}).then((res)=>{
                        let result = res.data;
                        if (result.code == 1) {
                            that.showSuccessMsgCall(function (){
                                that.getData()
                            })
                        } else {
                            that.showErrorMsg(result.msg)
                        }
                    })
                })
            }
        }
    })
</script>
</body>
</html>
